<template>
  <view class="image-download-page">
    <button @click="downloadImage">下载并显示图片</button>
    <image :src="imageUrl" class="show-image" mode="aspectFit" v-if="imageUrl"></image>
    <view class="loading" v-else>点击按钮开始下载...</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    };
  },
  methods: {
    downloadImage() {
      const imageUrl = 'https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg';
      uni.downloadFile({
        url: imageUrl,
        success: (downloadRes) => {
          if (downloadRes.statusCode === 200) {
            console.log('图片下载成功，临时路径：', downloadRes.tempFilePath);
            this.imageUrl = downloadRes.tempFilePath;
          } else {
            uni.showToast({
              title: '图片下载失败',
              icon: 'none'
            });
            console.error('图片下载失败，状态码：', downloadRes.statusCode);
          }
        },
        fail: (err) => {
          uni.showToast({
            title: '下载请求失败',
            icon: 'none'
          });
          console.error('下载请求失败：', err);
        },
        progress: (progressRes) => {
          console.log('下载进度：', progressRes.progress, '%');
        }
      });
    }
  }
};
</script>

<style scoped>
.image-download-page {
  padding: 20rpx;
}
button {
  margin-bottom: 30rpx;
}
.show-image {
  width: 100%;
  max-height: 600rpx;
}
.loading {
  text-align: center;
  padding: 20rpx;
}
</style>